﻿<%@ Page Title="phone" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type='text/javascript' src='/Scripts/jquery.min.js'></script>
    <script type="text/javascript" src="/Scripts/swfobject1.js"></script>
    <script type="text/javascript" src="/Scripts/pc2phone.js"></script>

    <script type="text/javascript" src="/Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="/Scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

    <script type='text/javascript' src='/Scripts/infogrid.js'></script>
    <link rel="stylesheet" href="/Styles/InfoGrid.css" type="text/css" />

    <link href="/Styles/Tabs/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
    <script src="/Styles/Tabs/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>

    <script src="/Scripts/Chat.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        function reloadContacts() {
            PageMethods.LoadContacts(true, LoadContactsOnSuccess, LoadContactsOnFailure);
        }

        function LoadContactsOnSuccess(result) {
            var json = eval("(" + result + ")");
            $("#dlContacts").html(json.Response);
            $allCells = $("dd").css({
                position: "relative",
                top: -1,
                left: 0,
                display: "none" // info cells are just kicked off the page with CSS (for accessibility)
            });
            $allCells.slideUp();
        }

        function LoadContactsOnFailure(error) {
            for (var name in error) {
                if (error.hasOwnProperty(name)) {
                    document.getElementById("callstatus").innerHTML += name + " : " + error[name] + "<br />";
                }
            }

        }

        function deleteContact(id) {
            PageMethods.DeleteContact(id, reloadContacts, function () { alert('Nu s-a putut sterge contactul.'); });
        }

        $(function () {
            // Tabs
            $('#tabs').tabs();

            /* Fancybox */
            $("a#inline").fancybox({
                'hideOnContentClick': true
            });

            $("a.iframe").fancybox();

            $('#tabs').tabs({
                select: function (event, ui) {
                    var url = $.data(ui.tab, 'load.tabs');

                    if (ui.tab.toString().indexOf("#History") > 0) {
                        document.getElementById('iframeHistory').src = "CallHistory.aspx";
                        return true;
                    }
                    if (url == 'BuyCredit.aspx') {
                        window.open(url, '_newtab');

                        return false;
                    }
                    return true;
                }
            });
        });

        function onPhoneKeyClick(digit) {
            var phoneInput = document.getElementById('phoneNumber');
            phoneInputFocus(phoneInput);
            phoneInput.value += digit;
        }
        function phoneInputBlur(elem) { if (elem.value == '') { elem.value = 'Număr telefon'; elem.style.color = '#AAA' } }
        function phoneInputFocus(elem) { if (elem.value == 'Număr telefon') { elem.value = ''; elem.style.color = 'black' } }

    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="rightColumn">
        <div id="phoneWrap" style="width:1px;height:1px;overflow:hidden; background-color:White; text-align:center; z-index:1101">
        <span id="micMuted" style="font-size: large; color: Red;">Va rugam sa
            permiteti folosirea microfonului pentru a fi auzit. 
        </span>
        
        <div id="phoneapi">
        </div></div>


        <div id="callstatus"></div>
        <div id="tabs">
	        <ul>
		        <li><a href="#tab-tel">Telefon</a></li>
		        <li><a href="BuyCredit.aspx">Cumpără credit</a></li>
		        <li><a href="#History">Istoric</a></li>
	        </ul>
	        <div id="tab-tel" style="">
		        <div id="callingBlock" style="visibility: hidden;"></div>
                <span id="flashError" style="font-size: large; color: Red; display: none;">
                    Nu se poate stabili conexiunea cu serverul. Va rugam <a href="javascript:location.reload(true)">reincarcati pagina</a> sau incercati mai tarziu. 
                </span>

                <div id="waitBlock">
                    <span>Initializare telefon ...</span>
                    <br />
                </div>

                <div id="phoneLeft" style="float:left; width:220px;">
                    <input style="width:175px; height:30px; font-size:20px; color:#AAA;" onblur="phoneInputBlur(this);"  onfocus="phoneInputFocus(this);" type="text" name="phoneNumber" id="phoneNumber" value="Număr telefon" />
                    
                <div id="phoneKeys">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td colspan="3">
                                <input name="callBtn" style="width:180px; height:36px; color:White; font-weight:bold; font-size:18px; " type="button" id="callBtn" class="call" value="Apeleaza" onclick="onClick()" />
                            </td>
                        </tr>
                        <tr align="center">
                            <td>
                                <img onclick="onPhoneKeyClick(1);" src="/Styles/Images/1.png" />
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick(2);" src="/Styles/Images/2.png" />
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick(3);" src="/Styles/Images/3.png" />
                            </td>
                        </tr>
                        <tr align="center">
                            <td>
                                <img onclick="onPhoneKeyClick(4);" src="/Styles/Images/4.png" />
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick(5);" src="/Styles/Images/5.png" />
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick(6);" src="/Styles/Images/6.png" />
                            </td>
                        </tr>
                        <tr align="center">
                            <td>
                                <img onclick="onPhoneKeyClick(7);" src="/Styles/Images/7.png" />
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick(8);" src="/Styles/Images/8.png" />
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick(9);" src="/Styles/Images/9.png" />
                            </td>
                        </tr>
                        <tr align="center">
                            <td>
                                <img onclick="onPhoneKeyClick('*');" src="/Styles/Images/asterisk.png" />
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick(0);" src="/Styles/Images/0.png" />
                                <%--<button type="button" style="background-color:#05296E; width:50px; height:50px;border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; border-width:3px; border-style:solid; color:White; font-size:20px; font-weight:bolder; border-color:#CCCCCC;">#</button>--%>
                            </td>
                            <td>
                                <img onclick="onPhoneKeyClick('#');" src="/Styles/Images/sharp.png" />
                                 <%--   <img width="100"onclick="document.getElementById('phoneNumber').value = ''; phoneInputBlur(document.getElementById('phoneNumber'));" src="/Styles/Images/clear.png" />--%>
                            </td>
                        </tr>
                    </table>
                </div>
                </div>
                <div style="float:right; width:250px;">Credit:
                <asp:Label ID="lblCredit" ClientIDMode="Static" Visible="True" runat="server" Text="Label"></asp:Label></div>
                <div style="clear:both;"></div>
            </div>
            <div id="History">
                <iframe width="485px" height="400px" src="CallHistory.aspx" id="iframeHistory" frameborder="0"></iframe>
            </div>
	        </div>
        </div>
    <div id="leftColumn">
        <div id="page-wrap">
		    <div class="info-col">
            <div style="background-color:#6B8FD4; width:211px;">
    		    <div style="float:left;"><h2>Contacte</h2></div>
                	<div style="float:right;"><a title="Adauga contact" class="iframe" href="/AddContact.aspx">
                    <img alt="Adauga contact" style="width:25px; height:25px" src="/Styles/Images/plus_icon.jpg" /></a></div>
                <div style="clear:both;"></div>
                </div>
                
    		    <dl runat="server" clientidmode="Static" id="dlContacts">
    		    </dl>
		    </div>			
	    </div>
    </div>
    <input type="hidden" name="ext" id="ext" value="" />
    <asp:HiddenField ClientIDMode="Static" ID="peer" runat="server" />
</asp:Content>
